<template>
  <div class="organizer">
    <div class="organizer-top">
      <span class="vertical"></span>
      <h3 class="organizer-title">全部活动方</h3>
    </div>
    <div class="organizer-conten">
      <div class="organizer-list" v-for="(item,index) in PartyList" :key="index" @click="navigaToOrganizerIntro(item.id)">
        <div class="organizer-list-left" @click=""><img :src="item.thumb_url" alt=""></div>
        <div class="organizer-list-right">
          <div class="organizer-name">{{item.name}}</div>
          <div class="organizer-info">{{item.site_present}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getPartyList
} from '../../api/index.js'
export default {
  data(){
    return {
      PartyList:[],
      limit: 6, //活动条数
      page: 0//页码
    }
  },
  onShow(){
    this.reqPartyList()
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.reqPartyList()
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqPartyList()
  },
  methods:{
    //获取活动方列表
    async reqPartyList(){
      let parmas = {
        limit: this.limit,
        page: this.page
      }
      let res = await getPartyList(parmas);
      if(res.data.level == "success"){
        if(this.page == 0){
          this.PartyList = res.data.data;
        }else{
          this.PartyList = this.PartyList.concat(res.data.data)
        }
      }else{
        wx.showToast({
          title: '获取活动方人气列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳活动方详情页面
    navigaToOrganizerIntro(Id){
      wx.navigateTo({
        url: '/pages/organizerIntro/main?id='+Id
      })
    },
  }
}
</script>
<style lang='stylus' scoped>
  .organizer
    .organizer-top
      display flex
      background-color #fff
      padding 25rpx
      .vertical
        width 6rpx
        height 36rpx
        background-color black
      .organizer-title
        font-size 32rpx
        margin-left 14rpx
        font-weight 600
    .organizer-conten
      width 100%
      .organizer-list
        display flex
        align-items center
        height 200rpx
        .organizer-list-left
          width 250rpx
          height 200rpx
          padding 10rpx
          img
            width 100%
            height 100%
        .organizer-list-right
          flex 1
          padding 10rpx
          height 200rpx
          color #666666
          .organizer-name
            height 40rpx
            line-height 40rpx
            font-size 16px
          .organizer-info
            margin-top 8rpx
            font-size 14px
            line-height 34rpx
            overflow hidden
            color #888
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 4
            -webkit-box-orient vertical
</style>